<template>
  <div>
    <a-card :title="title">
      <!-- 第一行 -->
      <a-card-grid
        style="width: 16%;height: 80px; text-align: center"
        :hoverable="false">序号</a-card-grid>
      <a-card-grid
        style="width: 20%;height: 80px;text-align: center"
        :hoverable="false">阶梯</a-card-grid>
      <a-card-grid
        style="width: 16%;height: 80px; text-align: center"
        :hoverable="false">备注</a-card-grid>
      <a-card-grid
        style="width: 24%;height: 80px; text-align: center"
        :hoverable="false">基数转折点</a-card-grid>
      <a-card-grid
        style="width: 24%;height: 80px; text-align: center"
        :hoverable="false">奖金占比毛利率</a-card-grid>
      <!-- 第二行 -->
      <a-card-grid
        style="width: 16%;height: 80px; text-align: center"
        :hoverable="false">1</a-card-grid>
      <a-card-grid
        style="width: 20%;height: 80px;text-align: center"
        :hoverable="false">毛利率最低值</a-card-grid>
      <a-card-grid
        style="width: 16%;height: 80px; text-align: center"
        :hoverable="false">{{ yewuBouns.base.start ? `${yewuBouns.base.start * 100}%以内（含）` : '--' }}</a-card-grid>
      <a-card-grid
        style="width: 24%;height: 80px; text-align: center"
        :hoverable="false">
        <div>
          <div
            v-show="edit"
            style=" top: -23px;text-align: left;">
            <a-input-number
              :min="0"
              :max="100"
              :precision="2"
              v-model="currentBase.start"
              placeholder="请输入基数转折点下限(%)" />
          </div>
          <span v-show="!edit">{{ showRate(yewuBouns.base.start ? (yewuBouns.base.start * 100 ).toFixed(2) : undefined) }}</span>
        </div>
      </a-card-grid>
      <a-card-grid
        style="width: 24%;height: 80px; text-align: center"
        :hoverable="false">
        <div>
          <div
            v-show="edit"
            style=" top: -23px;text-align: left;">
            <!-- <div>请输入奖金占比毛利率下限(%)</div>
            <div>当前值为{{ bouns.start }}%</div> -->
            <a-input-number
              :min="0"
              :max="100"
              :precision="2"
              v-model="currentBonus.start"
              placeholder="请输入奖金占比毛利率下限(%)" />
          </div>
          <span v-show="!edit">{{ showRate(yewuBouns.bouns.start ? (yewuBouns.bouns.start * 100 ).toFixed(2) : undefined ) }}</span>
        </div>
      </a-card-grid>
      <a-card-grid
        style="width: 16%;height: 80px; text-align: center"
        :hoverable="false">3</a-card-grid>
      <a-card-grid
        style="width: 20%;height: 80px;text-align: center"
        :hoverable="false">毛利率最高值</a-card-grid>
      <a-card-grid
        style="width: 16%;height: 80px; text-align: center"
        :hoverable="false">{{ yewuBouns.base.end ? `${yewuBouns.base.end * 100}%以上` : '--' }}</a-card-grid>
      <a-card-grid
        style="width: 24%;height: 80px; text-align: center"
        :hoverable="false">
        <div>
          <div
            v-show="edit"
            style=" top: -23px;text-align: left;">
            <a-input-number
              :min="0"
              :max="100"
              :precision="2"
              v-model="currentBase.end"
              placeholder="请输入基数转折点上限(%)" />
          </div>
          <span v-show="!edit">{{ showRate(yewuBouns.base.end ? (yewuBouns.base.end * 100 ).toFixed(2) : undefined ) }}</span>
        </div>
      </a-card-grid>
      <a-card-grid
        style="width: 24%;height: 80px; text-align: center"
        :hoverable="false">
        <div>
          <div
            v-show="edit"
            style=" top: -23px;text-align: left;">
            <a-input-number
              :min="0"
              :max="100"
              :precision="2"
              v-model="currentBonus.end"
              placeholder="请输入奖金占比毛利率下限(%)" />
          </div>
          <span v-show="!edit">{{ showRate(yewuBouns.bouns.end ? (yewuBouns.bouns.end * 100 ).toFixed(2) : undefined ) }}</span>
        </div>
      </a-card-grid>
    </a-card>
  </div>
</template>
<script>
import { showRate, showMonney } from './config'

export default {
  name: 'YewuPerformBonus',
  components: {},
  props: {
    title: {
      type: String,
      default: () => ''
    },
    yewuBouns: {
      type: Object,
      default: () => ({ base: { start: '0', end: '0' }, bouns: { start: '0', end: '0' } })
    },
    // base: {
    //   type: Object,
    //   default: () => {}
    // },
    // bouns: {
    //   type: Object,
    //   default: () => {}
    // },
    edit: {
      type: Boolean,
      default: () => false
    }
  },
  // mounted {}
  watch: {
    edit: function (edit) {
      if (edit) {
        this.currentBase = { start: this.yewuBouns.base.start
        ? this.yewuBouns.base.start * 100 : undefined,
        end: this.yewuBouns.base.end
        ? this.yewuBouns.base.end * 100 : undefined

        }
        this.currentBonus = { start: this.yewuBouns.bouns.start
                ? this.yewuBouns.bouns.start * 100 : undefined,

         end: this.yewuBouns.bouns.end ? this.yewuBouns.base.end * 100 : undefined
        }
      }
    }
  },
  data () {
    this.showMonney = showMonney
    this.showRate = showRate
    return {
      currentBase: { start: 0, end: 0 },
      currentBonus: { start: 0, end: 0 }
    }
  },
  methods: {
    getValue () {
      /**
       * base 合同毛利比率
       * bouns 毛利奖金比率
       */
      return {
        // base: this.currentBase,
        base: { start: this.currentBase.start
        ? this.currentBase.start / 100 : undefined,
        end: this.currentBase.end
        ? this.currentBase.end / 100 : undefined
        },
        // bouns: this.currentBonus:
        bouns: { start: this.currentBonus.start
        ? this.currentBonus.start / 100 : undefined,
        end: this.currentBonus.end
        ? this.currentBonus.end / 100 : undefined
        }
      }
    }
  }
}
</script>
